<template>
  <div class="act">
    <div class="actSet_top_wrap">
      <div
        class="top_item"
        @click="handleChange(index)"
        :class="{ active: current === index }"
        v-for="(item, index) in topList"
        :key="index"
      >
        <div class="title">{{ item.title }}</div>
        <!-- <div class="eng">{{ item.eng }}</div> -->
      </div>
    </div>
    <div class="detail_wrap">
      <basic v-if="current == 0"></basic>
      <activity v-if="current == 1"></activity>
      <adverse v-if="current == 2"></adverse>
      <application v-if="current == 3"></application>
      <comment v-if="current == 4"></comment>
      <!-- <active v-if="current == 5"></active> -->
      <share v-if="current == 5"></share>
      <wechat-set v-if="current == 6"></wechat-set>
    </div>
  </div>
</template>

<script>
import basic from "./actChildren/basic";
import activity from "./actChildren/activity";
import adverse from "./actChildren/adverse";
import application from "./actChildren/application";
import comment from "./actChildren/comment";
// import active from "./actChildren/active";
import share from "./actChildren/share";
import wechatSet from "./actChildren/wechatSet";
import { mapGetters } from "vuex";
import { LreItem, LsetItem } from "@/utils/storage";
export default {
  data() {
    return {
      topList: [
        {
          title: "基本设置",
          eng: "Basic setup",
        },
        {
          title: "活动介绍",
          eng: "Activity is introduced",
        },
        {
          title: "广告设置",
          eng: "Advertising set",
        },
        {
          title: "报名设置",
          eng: "Application Settings",
        },
        {
          title: "评论设置",
          eng: "Comment set",
        },
        // {
        //   title: "活动动态",
        //   eng: "Active dynamic",
        // },
        {
          title: "分享设置",
          eng: "Sharing set",
        },
        {
          title: "公众号设置",
          eng: "Sharing set",
        },
      ],
    };
  },
  components: {
    basic,
    activity,
    adverse,
    application,
    comment,
    // active,
    share,
    wechatSet
  },
  computed: {
    ...mapGetters("status", {
      current: "current",
    }),
  },
  methods: {
    handleChange(index) {
      LsetItem("current", index);
      this.$store.commit("status/SET_CURRENT", index);
    },
  },
  destroyed() {
    LreItem("current");
    this.$store.commit("status/SET_CURRENT", 0);
  },
};
</script>


<style lang="scss" scoped>
.act {
  height: 100%;
  .actSet_top_wrap {
    display: flex;

    .top_item {
      margin-right: 25px;
      cursor: pointer;
      color: rgb(191, 192, 196);
      padding-bottom: 10px;
      border-bottom: 2px solid transparent;
    
      .title {
        font-size: 18px;
        font-weight: 500;

      }
      .eng {
        font-size: 10px;
        font-weight: 500;
        
      }
      &.active {
        color: $themeColor;
        
        border-bottom: 2px solid $themeColor;
      }
    }
  }
  .detail_wrap {
    padding-top: 50px;
  }
}
</style>